<template>
  <div class="herd">
    <div class="hd">
      <span>&lt;</span>
      <p>试用报告</p>
    </div>
    <div class="con" v-for="(v,i) in arr" :key="i" @click="fun()">
      <div class="conhd">
        <div class="shang">
          <img src="../../../../public/qiaoxiaodong/bg1.png" alt="" />
          <span>匿名用户</span>
          <p>常规项目</p>
        </div>
        <div class="xia">
          <span>2021-09-07</span>
        </div>
      </div>
      <div class="conter">
          <p>{{v.pxx}}</p>
      </div>
      <div class="foot">
          <img :src="v.pic" alt="">
          <img :src='v.ppic' alt="">
          <img :src='v.pic' alt="">
      </div>
      <div class="ftr" >
          <div class="lt">
              <img :src="v.pic" alt="">
          </div>
          <div class="rg">
              <p>{{v.gname}}</p>
              <span>{{v.price1}}</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getlink} from "../../../api/getapi.js"
import {getdata} from "../../../api/getapi.js"
export default {
    data() {
        return {
            arr:[
                // {imga:"qiaoxiaodong/bg2.png",imgb:"qiaoxiaodong/bg3.png",imgc:"qiaoxiaodong/bg4.png",},
                // {imga:"qiaoxiaodong/bg6.png",imgb:"qiaoxiaodong/bg7.png",imgc:"	qiaoxiaodong/bg8.png",},
                // {imga:"qiaoxiaodong/bg2.png",imgb:"qiaoxiaodong/bg3.png",imgc:"qiaoxiaodong/bg4.png",},
            ]
        }
    },
    mounted(){
        getlink("/api/selectpj").then((ok)=>{
            console.log(ok.data);
            this.arr = ok.data;
            // console.log(this.arr);
        })
    },
    methods:{
      fun() {
        this.$router.push("/bgxq")
        getdata("/api/selectpj",this.arr.pid).then((ok)=>{
            console.log(ok);
            // this.arr = ok.data;
            // console.log(this.arr);
        })
      }
    }
};
</script>

<style scoped>
.body {
    background: #f7f7f7;
}
.hd {
  width: 100%;
  height: 1.3rem;
  /* background: red; */
  display: flex;
  justify-content: end;
  align-items: center;
  background: #fff;
  position: fixed;
  top: 0;
  z-index: 9999;
}
.hd span {
  width: 0.5rem;
  height: 0.5rem;
  font-size: 0.5rem;
}
.hd p {
  font-size: 0.5rem;
  margin-left: 2.3rem;
}
.con {
  width: 100%;
  /* background: blue; */
  margin-top: 1.5rem;
  background: #fff;
  margin-top: 1.rem;
}
.conhd {
  width: 100%;
  height: 1.55rem;
  /* background: blue; */
  position: relative;
}
.shang {
  width: 3.35rem;
  height: 1.5rem;
  /* display: flex; */
  position: relative;
  margin-left: 0.3rem;
}
.shang img {
  margin-top: 0.2rem;
}
.shang span {
  font-size: 0.35rem;
  position: absolute;
  left: 1.4rem;
  top: 0.2rem;
}
.shang p {
  font-size: 0.35rem;
  position: absolute;
  left: 1.4rem;
  top: 0.7rem;
}
.xia {
  position: absolute;
  right: 0.3rem;
  top: 0.35rem;
}
.xia span {
  font-size: 0.35rem;
}
.conter {
    width: 90%;
    height: 1.55rem;
    /* background: red; */
    margin: 0 auto;
}
.conter p {
    font-size: 0.35rem;
}
.foot {
    width: 90%;
    height: 2rem;
    margin: 0 auto;
}
.foot img {
    width: 2rem;
    height: 2rem;
    margin-left: 0.2rem;
}
.ftr {
    width: 90%;
    height: 2.15rem;
    /* background: red; */
    margin: 0 auto;
    margin-top: 0.2rem;
    border-radius: 0.1rem;
    display: flex;
    align-items: center;
    background: #f8f6f7;
}
.ftr .lt {
    margin-left: 0.2rem;
}
.ftr .lt  img {
  width: 1.6rem;
  height: 1.6rem;
}
.ftr .rg {
    margin-left: 0.2rem;
}
.ftr .rg p{
    font-size: 0.3rem;
}
.ftr .rg span {
    font-size: 0.3rem;
    color: red;
}
</style>